@ts-nocheck
<template>
  <div class="root-container">
    <div v-for="seat in seatStatus" :key="seat.seatName">
      <div
        v-if="checkVisible(seat)"
        class="item-container"
        :style="{
          border: '1px solid ' + (darkMode ? seat.defaultColor : seat.color),
          borderLeft:
            '10px solid ' + (darkMode ? seat.defaultColor : seat.color),
          backgroundColor: `${darkMode ? seat.defaultColor : seat.color}10`,
        }"
      >
        <div class="item-container-frequency">
          <div
            :style="{
              color: darkMode ? seat.defaultColor : seat.color,
            }"
          >
            <div class="cell cell-title" style="transform: translateY(4px)">
              {{ seat.seatName }}
            </div>
            <div
              class="cell cell-title"
              v-if="seat.frequency"
              style="transform: translateY(-4px)"
            >
              {{ seat.frequency }}
            </div>
            <div
              class="cell cell-title"
              v-else
              style="transform: translateY(-4px); font-size: 14px"
            >
              频率未设置
            </div>
          </div>
        </div>
        <div class="item-container-detail">
          <div class="cell cell-detail">
            <!-- sectorCodes -->
            <span v-if="seat.sectorCodes.length > 0">
              <el-tag
                size="small"
                :type="
                  valueTarget == 'planning' &&
                  seat.planningSectorCodes != null &&
                  seat.planningSectorCodes.indexOf(sector) == -1
                    ? 'warning'
                    : 'info'
                "
                v-for="sector in seat.sectorCodes"
                :key="sector"
                :class="[
                  valueTarget == 'planning' &&
                  seat.planningSectorCodes != null &&
                  seat.planningSectorCodes.indexOf(sector) == -1
                    ? 'blinking-slight'
                    : '',
                ]"
                class="tag-inline"
              >
                {{ sector }}
              </el-tag>
            </span>
            <!-- planningSectorCodes -->
            <span
              v-if="
                valueTarget == 'planning' &&
                seat.planningSectorCodes != null &&
                seat.planningSectorCodes.length > 0
              "
            >
              <el-tag
                size="small"
                type=""
                v-for="sector in seat.planningSectorCodes"
                v-show="seat.sectorCodes.indexOf(sector) == -1"
                :key="sector"
                class="tag-inline blinking-slight"
              >
                {{ sector }}
              </el-tag>
              <el-tag v-if="seat.sectorCodes.length == 0" size="small" type="">
                <el-icon><InfoFilled /></el-icon>
                <span>扇区暂未分配</span></el-tag
              >
              <el-tag
                v-else-if="valueTarget == 'planning'"
                size="small"
                type="warning"
              >
                <el-icon><InfoFilled /></el-icon>
                <span>扇区暂未变更</span>
              </el-tag>
            </span>
            <span
              v-if="
                seat.sectorCodes.length == 0 && seat.planningSectorCodes == null
              "
            >
              <el-tag size="small" type="danger">
                <el-icon><WarningFilled /></el-icon>
                <span>未分配扇区</span></el-tag
              >
            </span>
          </div>
          <div class="cell cell-detail">
            <div v-if="seat.users.length > 0">
              <el-tag
                v-for="user in seat.users"
                :key="user.userName"
                size="small"
                :type="
                  user.seatRole == '学员' || user.seatRole == '教员'
                    ? 'success'
                    : seat.users.filter((u) => u.seatPost == user.seatPost)
                        .length > 1
                    ? 'warning'
                    : 'info'
                "
                :class="[
                  'tag-inline',
                  user.seatRole == '学员' || user.seatRole == '学员'
                    ? 'vibrate-fast'
                    : '',
                ]"
              >
                <el-icon v-if="user.seatPost == '管制岗'"><Service /></el-icon>
                <el-icon v-else-if="user.seatPost == '协调岗'"
                  ><Phone
                /></el-icon>
                <el-icon v-else><View /></el-icon>
                <span>{{ user.userName }}</span>
              </el-tag>
            </div>
            <div>
              <el-tag
                class="low-profile tag-inline rock"
                size="small"
                type="danger"
                link
                v-if="seat.users.length == 0"
              >
                <el-icon><WarningFilled /></el-icon>
                <span>无打卡记录</span>
              </el-tag>
              <el-tag
                v-if="
                  seat.users.length > 0 &&
                  seat.users.filter((u) => u.seatPost == '管制岗').length == 0
                "
                type="danger"
                size="small"
                class="tag-inline rock"
              >
                <el-icon><Service /></el-icon>
                <span>管制席未打卡</span>
              </el-tag>
              <el-tag
                v-if="
                  seat.users.length > 0 &&
                  seat.users.filter((u) => u.seatPost == '协调岗').length == 0
                "
                type="danger"
                size="small"
                class="tag-inline rock"
              >
                <el-icon><Phone /></el-icon>
                <span>协调席未打卡</span>
              </el-tag>
            </div>
          </div>
          <div class="cell cell-detail" style="justify-content: space-between">
            <div>
              <el-tag
                class="tag-inline"
                size="small"
                type="info"
                v-show="seat.seatName == currentSeat.seatName"
                @click="showSeatData = !showSeatData"
              >
                <span>当前</span>
              </el-tag>
              <el-tag
                class="tag-inline"
                size="small"
                type="success"
                link
                v-show="
                  seat.users.filter(
                    (u) => u.seatRole == '学员' || u.seatRole == '教员'
                  ).length >= 2
                "
              >
                <span>带培中</span>
              </el-tag>
              <el-tag
                class="tag-inline"
                size="small"
                type="warning"
                link
                v-show="
                  seat.users.filter(
                    (u) => u.seatRole == '放单' && u.seatPost == '管制岗'
                  ).length == 2 ||
                  seat.users.filter(
                    (u) => u.seatRole == '放单' && u.seatPost == '协调岗'
                  ).length == 2
                "
              >
                <span>交接中</span>
              </el-tag>
            </div>
            <div>
              <el-button
                link
                type="info"
                size="small"
                @click="setFrequency(seat.seatName)"
              >
                <el-icon><Microphone /></el-icon>
                <span>频率</span>
              </el-button>
              <el-button
                link
                type="info"
                size="small"
                @click="setColor(seat.seatName)"
              >
                <el-icon><Brush /></el-icon>
                <span>颜色</span>
              </el-button>
              <!-- 
                @click="
                  $msgbox({
                    title: seat.seatName + ' 原始数据',
                    message: h(
                      'pre',
                      {
                        style: {
                          height: '480px',
                          overflow: 'auto',
                          padding: '12px',
                        },
                      },
                      JSON.stringify(seat, null, 2)
                    ),
                  })
                "
               -->
              <el-button
                size="small"
                link
                type="info"
                @click="showSeatDetails(seat)"
              >
                <el-icon><InfoFilled /></el-icon>
                <span>详情</span>
                <!-- <span>JSON</span> -->
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="showConfigFrequency"
      :close-on-click-modal="false"
      :show-close="false"
      :destroy-on-close="true"
      width="240px"
      append-to-body
      title="修改频率"
      draggable
    >
      <set-frequency-view
        v-if="showConfigFrequency"
        :target="settingTarget"
        :seatStatus="seatStatus"
        @updated="refreshData"
        @close="showConfigFrequency = false"
      />
    </el-dialog>
    <el-dialog
      v-model="showConfigColor"
      :close-on-click-modal="false"
      :show-close="false"
      :destroy-on-close="true"
      width="640px"
      append-to-body
      title="修改颜色"
      draggable
    >
      <set-color-view
        v-if="showConfigColor"
        :target="settingTarget"
        :seatStatus="seatStatus"
        @updated="refreshData"
        @close="showConfigColor = false"
      />
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :show-close="false"
      v-model="showSeatData"
      :destroy-on-close="true"
      width="480px"
      append-to-body
      title="Response Data"
      draggable
    >
      <el-input
        type="textarea"
        :rows="20"
        :value="JSON.stringify(currentSeatData, null, 2)"
        readonly
        resize="none"
        size="small"
      ></el-input>
      <div style="margin-top: 12px; text-align: center">
        <el-button size="small" @click="showSeatData = false">Close</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, h } from "vue";
import useSeatStore from "@/store/seat";
import useCommonStore from "@/store/common";
import matchForeColor from "@/utils/matchForeColor.js";
import setColorView from "./setColor.vue";
import setFrequencyView from "./setFrequency.vue";
import dateFormat from "@/utils/dateFormat.js";
import showSeatDetails from "../../common/showSeatDetails.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const seatStatusFull = computed(() => seatStore.seatStatusFull);
const seatStatus = computed(() =>
  seatStore.seatStatus.filter(
    (cell) => cell.orgGroup == "TMA" && cell.sectorYes
  )
);
const currentSeat = computed(() => seatStore.currentSeat);
const currentSeatData = computed(() => seatStore.currentSeatData);
const valueTarget = computed(() => seatStore.valueTarget);
const darkMode = computed(() => commonStore.darkMode);

const showConfigColor = ref(false);
const showConfigFrequency = ref(false);
const showSeatData = ref(false);
const settingTarget = ref(null);

const setFrequency = (id) => {
  showConfigFrequency.value = true;
  settingTarget.value = id;
};

const setColor = (id) => {
  showConfigColor.value = true;
  settingTarget.value = id;
};

const refreshData = () => {
  seatStore.requestData();
};

const checkAuth = (id) => {
  if (id == currentSeat.value.seatName) return true;
  if (["OMA01", "SUP01", "SUP02"].indexOf(currentSeat.value.seatName) > -1)
    return true;
  return false;
};

const checkVisible = (content) => {
  if (
    content.sectorCodes.length > 0 ||
    content.users.length > 0 ||
    (valueTarget.value == "planning" && content.planningSectorCodes != null)
  ) {
    return true;
  }
  return false;
};
</script>

<style scoped>
@import "../styles/blinking.css";
@import "@/styles/shake.css";
@import "@/styles/vibrate.css";
@import "../../common/listStyle.css";
</style>
